<template>
  <div class="e-wrap">
    <w-form-validate @on-validate="submitUpload">
      <div class="e-item">
        <span class="title">视频名称</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" v-model="uploadParams.videoName" rule="isEmpty" error="*此项必填"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">显示终端</span>
        <div class="dis-block">
          <w-select :options='terminalType' v-model="uploadParams.showType" @on-select='changeTerminal'></w-select>
        </div>
      </div>
      <div class="e-item">
          <span class="title">所属频道</span>
          <div class="dis-block">
            <w-select :options='channelList' v-model="uploadParams.chId"></w-select>
          </div>
      </div>
      <div class="e-item">
          <span class="title">视频上传</span>
          <div class="dis-block">
            <div class="file-upload"  @click="chooseFile">
              <input type="text" placeholder="请选择文件" readonly v-model="uploadParams.icon_name">
            </div>
            <input type="file" accept="video/*" ref="fileInput" @change="changeUrl" style="display: none;">
            <button type='button' class="browse" @click="chooseFile">浏览</button>
          </div>
      </div>
      <div class="e-item">
        <span class="title">是否显示</span>
        <div class="dis-block" style="margin-top: 5px;">
          <w-radio name='viewname' :label='1' v-model="uploadParams.display">是</w-radio>
          <w-radio name='viewname' :label='0' v-model="uploadParams.display">否</w-radio>
        </div>
      </div>
      <div class="e-item">
        <span class="title">排序</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" v-model="uploadParams.sequence" rule="isEmpty" error="*此项必填"></w-input>
        </div>
      </div>
      <!-- 保存按钮 -->
      <div class="save-btn">
        <!-- <w-button @on-click='submitUpload'>保存</w-button> -->
        <button type="submit">保存</button>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import { apiVideoMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      terminalType: [
        {
          label: '手机端',
          value: 'MOBILE'
        },
        {
          label: '电脑端',
          value: 'PC'
        },
        {
          label: '手机网页',
          value: 'H5'
        }
      ],
      uploadParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || '',
        showType: '',
        icon_name: '',
        videoName: '',
        chId: '',
        display: '1',
        sequence: ''
      },
      versionType: [],
      infoParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || ''
      }
    }
  },
  computed: {
    ...mapGetters(['token', 'channelList'])
  },
  created() {
    this.fetchChannelList({token: this.token, three: this.$route.query.three, terminal: this.$route.query.terminal})
    if (this.$route.query.id) {
      this.getVideoDetil()
    }
  },
  methods: {
    ...mapActions(['fetchChannelList']),
    getVideoDetil() {
      this.infoParams.accessToken = this.token
      apiVideoMange.videoInfo(this.infoParams).then(data => {
        if (data.code != 200) return
        this.uploadParams.showType = data.data.videoinfo.showType
        this.uploadParams.icon_name = data.data.videoinfo.icon_name
        this.uploadParams.videoName = data.data.videoinfo.videoName
        this.uploadParams.chId = data.data.videoinfo.chId
        this.uploadParams.display = data.data.videoinfo.display || '1'
        this.uploadParams.sequence = data.data.videoinfo.sequence
      })
    },
    // 与 视频上传 中 的按钮绑定
    chooseFile() {
      this.$refs.fileInput.click()
    },
    // 上传视频
    changeUrl() {
      const file = this.$refs.fileInput.files[0]
      if (!file) return
      if (!/\.(mp4|rmvb|avi)/i.test(file.name)) {
        this.$toast('请上传mp4|rmvb|avi格式的文件')
        return
      }
      if (file.size > 1048576*40) {
        this.$toast('请上传小于40M的视频')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 'file')
      apiVideoMange.uploadVideo(formData).then(data => {
        if (data.code != '200') return
        this.uploadParams.icon_name = data.data.url
      })
    },
    changeTerminal() {
      this.uploadParams.chId = ''
      let showType
      if (this.uploadParams.showType) {
        if (this.uploadParams.showType == 'PC') {
          showType = 'PC'
        } else {
          showType = 'MOBILE'
        }
      } else {
        showType = ''
      }
      this.fetchChannelList({token: this.token, three: this.$route.query.three, terminal: showType})
    },
    submitUpload() {
      this.uploadParams.accessToken = this.token
      if (!this.uploadParams.showType) {
        this.$toast('请选择展示终端')
        return
      }
      if (!this.uploadParams.chId) {
        this.$toast('请选择频道')
        return
      }
      if (!this.uploadParams.icon_name) {
        this.$toast('请上传视频')
        return
      }
      apiVideoMange.addVideo(this.uploadParams).then(data => {
        if (data.code != '200') return
        this.$toast(`${this.$route.query.id ? '修改' : '新增'}成功`, () => {
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-wrap {
    width: 450px;
    margin: 30px auto;
    .e-item {
      display: block;
      margin-bottom: 20px;
      margin-left: 0;
      .title {
        width: 76px;
        margin-right: 20px;
      }
      .dis-block {
        width: 320px;
        .imgBox {
          display: inline-block;
          width: 54px;
          height: 54px;
          border: 1px solid $border-gray;
        }
      }
      .file-upload {
        display: inline-block;
        width: 234px;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        color: $color-dark;
        border: 1px solid $border-gray;
        input {
          width: 96%;
        }
      }
    }
    .save-btn {
      text-align: center;
      margin-top: 30px;
      button {
        background: $color-main;
        width: 140px;
        height: 32px;
        border-radius: 5px;
        color: #fff;
      }
    }
}
</style>